<template>
	<view style="background-color:#F7F7F7 ;">
		<z-paging ref="paging" class="user-list" v-model="datalist" @query="getSelfUserList" default-page-size="20"
			:auto="false">
			<template #top>
				<view class="top-box">
					<view class="search-top">
						<view class="input-search">
							<input type="text" placeholder="搜索关键字" v-model="keywords" />
							<image src="../../static/images/home/切片@2x.png" @click="refreshList"></image>
						</view>
						<view class="add-btn" @click="gotouserAdd()">
							<image src="../../static/images/user/编组 3备份 3@2x.png" mode=""></image>
							<text>创建账户</text>
						</view>
					</view>
					<view class="list-title-box">
						<view class="title-block"></view>
						<view class="list-title">代理商列表({{userTotal}})</view>
					</view>
				</view>
			</template>
			<view class="device-list-box">
				<view class="device-list-item" v-for="(item, i) in datalist" :key="i">
					<view class="item-top">
						<view class="item-top-left">{{ item.nickname }}</view>
						<view class="item-top-right">分成：{{ item.divide_rate }}%</view>
					</view>
					<view class="deviceContent">
						<!-- <image :src="item.avatar"></image> -->
						<view class="item-info">
							<view class="t0">代理编号：{{ item.id }}</view>
							<view class="t1">手机号码：{{ item.mobile }}</view>
							<view class="t2">注册时间：{{ item.createtime }}</view>
							<view class="t2" v-if="item.remarks">备注：{{ item.remarks }}</view>
						</view>
					</view>
					<view class="btns">
						<button class="btn-blue" @click="gotouserEdit(item)">
							<image src="../../static/images/user/编组备份 7.png" class="icon"></image>
							用户修改
						</button>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import api from '@/api/index.js';
	export default {
		data() {
			return {
				keywords: '',
				datalist: [],
				userinfo: '',
				userTotal:0
			};
		},
		onLoad(options) {
			this.getSelfUserList(1, 20);
		},
		onShow() {
			this.getUserInfo()
			this.refreshList()
		},
		methods: {
			getUserInfo() {
				api.getUserInfo().then(res => {
					this.userinfo = res.data;
				});
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.scrollToTop(false)
					this.$refs.paging.refresh();
				}
			},
			getSelfUserList(pageNo, pageSize) {
				api.getSelfUserList({
					page: pageNo,
					limit: pageSize,
					keywords: this.keywords,
				}).then(res => {
					this.userTotal = res.data.total
					this.$refs.paging.complete(res.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			gotouserAdd() {
				uni.navigateTo({
					url: '/pages/user/selfUserEdit?isEdit=0' // 用户添加
				});
			},
			gotouserEdit(user) {
				this.$store.commit('saveTempUser', user);
				uni.navigateTo({
					url: '/pages/user/selfUserEdit?isEdit=1' // 用户修改
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.top-box {
		.search-top {
			display: flex;

			.input-search {
				position: relative;
				flex: 1;

				uni-input {
					background: #ffffff;
					box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
					border-radius: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #7d8592;
					padding: 24rpx 40rpx;
					font-style: normal;
				}

				uni-image {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					right: 24rpx;
					top: 20rpx;
				}
			}

			.add-btn {
				width: 198rpx;
				height: 88rpx;
				background: #ffffff;
				box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
				border-radius: 12px;
				margin-left: 10px;
				display: flex;
				align-items: center;
				justify-content: center;

				uni-image {
					width: 17px;
					height: 17px;
				}

				uni-text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #49a1fd;
					line-height: 44rpx;
					text-align: right;
					font-style: normal;
				}
			}
		}

		.list-title-box {
			display: flex;
			align-items: center;
			margin: 32rpx 0 14rpx;

			.title-block {
				width: 8rpx;
				height: 36rpx;
				background: #FFFFFF;
				border-radius: 5rpx;
			}

			.list-title {
				padding-left: 22rpx;
				font-weight: 600;
				font-size: 34rpx;
				color: #FFFFFF;
			}
		}

		.tab-top {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 32rpx 0;

			.tab-item {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #ffffff;
				line-height: 42rpx;
				font-style: normal;

				&.active {
					font-size: 34rpx;
					color: #ffffff;
					line-height: 48rpx;
					position: relative;

					&::after {
						position: absolute;
						content: '';
						bottom: -5px;
						left: calc(50% - 30rpx);
						width: 60rpx;
						height: 8rpx;
						background: #ffffff;
						border-radius: 3px;
					}
				}
			}
		}

	}

	.user-list {

		background: url('../../static/images/home/home-bg.png') no-repeat;
		background-size: 100% 348rpx;
		padding-bottom: 100rpx;
		padding: 28rpx;

		.device-list-box {
			.device-list-item {
				background: url('../../static/images/home/编组 3备份 2@2x.png') no-repeat;
				background-size: 100% 100%;
				padding: 20px 14px;
				border-radius: 14px;
				position: relative;

				.item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-top-left {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #000000;
						line-height: 40rpx;
					}

					.item-top-right {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #f95452;
						line-height: 40rpx;
					}
				}

				.deviceContent {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					uni-image {
						width: 120rpx;
						height: 120rpx;
						margin-right: 16rpx;
					}

					.item-info {
						width: 100%;
						.t0 {
							font-weight: 500;
							font-size: 28rpx;
							color: #413100;
							line-height: 40rpx;
							font-style: normal;
						}

						.t1 {
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							font-style: normal;
						}

						.t2 {
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							font-style: normal;
							display: flex;
							justify-content: space-between;

							.t-item {
								flex: 1;
							}
						}
					}
				}

				.deviceBottom {
					border-bottom: 1px solid rgba(73, 161, 253, 0.2);
					padding-bottom: 16rpx;
					padding-top: 14rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.bottom-left {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
					}

					.bottom-right {
						display: flex;
						align-items: center;
						justify-content: center;
						background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
						box-shadow: 0px 2px 6px 0px rgba(20, 135, 255, 0.4);
						border-radius: 22px;
						padding: 4rpx 16rpx;

						uni-image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 6rpx;
						}

						uni-text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #ffffff;
							line-height: 36rpx;
							font-style: normal;
						}
					}
				}

				.btns {
					display: flex;
					justify-content: end;
					margin-top: 20rpx;

					uni-button {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #ffffff;
						line-height: 40rpx;
						font-style: normal;
						padding: 8rpx;
						border-radius: 4px;
						margin: 0 0 0 20rpx;
						display: flex;
						align-items: center;

						.icon {
							width: 32rpx;
							height: 32rpx;
							margin-right: 8rpx;
						}

						&.btn-blue {
							background: #49a1fd;
						}
					}
				}
			}
		}
	}
</style>